<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,700italic,800,300,300italic,400italic,400,600,600italic'
          rel='stylesheet' type='text/css'>
    <!--Custom-Theme-files-->
    <link href="css/style.css" rel='stylesheet' type='text/css'/>
    <script src="js/jquery.min.js"></script>
    <!--/script-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
            });
        });
    </script>
</head>
<body>
<div class="col-md-9 main">
    <!-- register -->
    <div class="sign-up-form">
        <h3 class="tittle">用户注册 <i class="glyphicon glyphicon-file"></i></h3>
        <form action="RegistServlet" method="post">
            <div class="sign-up">
                <div class="sign-u">
                    <div class="sign-up1">
                        <h4 class="a">用户名：</h4>
                    </div>
                    <div class="sign-up2">
                        <form action="" method="post">
                            <input type="text" class="text" name="username" id="username" maxlength="6">
                            <span id="msg"></span>
                        </form>
                    </div>
                    <div class="clearfix"></div>
                    <div class="sign-up1">
                        <h4 class="a">密码：</h4>
                    </div>
                    <div class="sign-up2">
                        <input type="password" class="Password" name="userpwd" id="userpwd" maxlength="12">
                        <span id="msg1"></span>
                    </div>
                    <div class="sign-up1">
                        <h4 class="a">验证码：</h4>
                    </div>
                    <div class="sign-up2">
                        <input name="checkCode" type="text" id="checkCode" size="12" maxlength="4" />
                        <img src="PictureCheckCode" id="CreateCheckCode" align="middle">
                        <a href="" onclick="myReload()"> 看不清,换一个</a><br>
                        <span id="yanzhengma"></span>
                    </div>
                </div>
                <input type="submit" value="注册">
                <div class="col-md-6 login-right">
                    <h3 class="tittle">老用户登录 <i class="glyphicon glyphicon-file"></i></h3>
                    <a href="login2.jsp" class="hvr-bounce-to-bottom button">已有账号，登录</a>
                </div>
                <div class="clearfix"></div>
            </div>
        </form>
    </div>
    <!-- //register -->
    <!-- //login-page -->
    <div class="clearfix"></div>
</div>

</body>
</html>
<script>
    function myReload() {
        document.getElementById("CreateCheckCode").src = document
                .getElementById("CreateCheckCode").src
            + "?nocache=" + new Date().getTime();
    }
    $(function () {
            $(":submit").attr("disabled","disabled");
            $("#username").blur(function () {
                $("#msg").html("")
                if($("#username").val()==""){
                    $("#msg").html("用户名不能为空！").css("color","red");
                    $(":submit").attr("disabled","disabled");
                }else{
                    $(":submit").attr("disabled",false);
                }
            });

            $("#username").blur(function () {
                $.ajax({
                    type:"POST",
                    url:"CheckNameExist",
                    data:{username:$("#username").val()},
                    success:function(data){
                        if(data=="true"){
                            $("#msg").html("用户名已存在").css("color","red");
                            $(":submit").attr("disabled","disabled");
                        }
                    }
                });
            });

            $("#userpwd").blur(function () {
                $("#msg1").html("")
                if($("#userpwd").val()==""){
                    $("#msg1").html("密码不能为空！").css("color","red");
                    $(":submit").attr("disabled","disabled");
                }
            });
            $(":submit").click(function () {
                if($("#userpwd").val()==null){
                    $("#msg1").html("密码不能为空！").css("color","red");
                    $(":submit").attr("disabled","disabled");
                }
                if($("#checkCode").val()==""){
                    $(":submit").attr("disabled","disabled");
                    $("#yanzhengma").html("验证码不能为空").css("color","red");
                }
            });

            $("#checkCode").blur(function () {
                $.ajax({
                    type:"POST",
                    url:"CheckCodeServlet",
                    data:{checkCode:$("#checkCode").val()},
                    success:function (data) {
                        $(":submit").attr("disabled",false);
                        if(data=="1"){
                            $("#yanzhengma").html("验证码不能为空").css("color","red");
                            $(":submit").attr("disabled","disabled");
                        }else if(data=="2"){
                            $("#yanzhengma").html("验证码错误").css("color","red");
                            $(":submit").attr("disabled","disabled");
                        }
                    }
                });
            });

        }
    );
</script>
